<template>
  <div class="appoInfo-container" @click.stop="()=>{}">
    <Dialogdrawerdefect
      :ddtvisible.sync="appoInfoVisible"
      :modal="false"
      size="550px"
    >
      <div class="appoInfo-wrap">
        <div class="aiw-grid">
          <div class="aig-title">
            <div class="tit">参数预约</div>
            <div class="navs">
              <div class="btn" v-show="appoInfo.appointmentStatus==='正常预约'" @click="appoDetail">预约详情 <i class="el-icon-arrow-right"></i></div>
            </div>
          </div>
          <div class="aiw-main">
            <el-table
              :data="tableDataTime"
              border
              size="mini"
              :header-cell-style="{backgroundColor: '#EEF5FE'}"
              style="width: 100%;">
              <el-table-column prop="appointmentDate" label="日期" align="center"></el-table-column>
              <el-table-column prop="checkClass" label="班次" align="center"></el-table-column>
              <el-table-column prop="beginTime" label="开始时间" align="center"></el-table-column>
              <el-table-column prop="endTime" label="结束时间" align="center"></el-table-column>
              <el-table-column prop="color" label="颜色" align="center">
                <template slot-scope="scope">
                  <div>{{scope.row.color?scope.row.color:'-'}} <span class="color_block" :style="{backgroundColor: scope.row.color?scope.row.color:''}"></span></div>
                </template>
              </el-table-column>
            </el-table>
            <el-table
              :data="tableDataInfo"
              border
              size="mini"
              :header-cell-style="{backgroundColor: '#EEF5FE'}"
              style="width: 100%;margin-top: 10px;">
              <el-table-column prop="initialNum" label="初始号码" align="center"></el-table-column>
              <el-table-column prop="checkNum" label="号源" align="center"></el-table-column>
              <el-table-column prop="reserveNum" label="预留" align="center"></el-table-column>
              <el-table-column prop="addNum" label="追加" align="center"></el-table-column>
              <el-table-column prop="callNum" label="已预约" align="center"></el-table-column>
              <el-table-column prop="appointmentStatus" label="预约状态" align="center">
                <template slot-scope="scope">
                  <span :class="appoStatusClassFlr(scope.row.appointmentStatus)">{{scope.row.appointmentStatus}}</span>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>

        <div class="aiw-grid" v-show="tableDataFilter.length>0">
          <div class="aig-title">
            <div class="tit">过滤详情</div>
          </div>
          <div class="aiw-main">
            <el-table
              :data="tableDataFilter"
              border
              size="mini"
              :header-cell-style="{backgroundColor: '#F4F4F5'}"
              style="width: 100%">
              <el-table-column prop="parametersName" label="参数" align="center"></el-table-column>
              <el-table-column prop="parametersValues" label="参数值" align="center"></el-table-column>
              <!-- <el-table-column prop="parametersType" label="参数类型" align="center"></el-table-column> -->
            </el-table>
          </div>
        </div>

        <div class="aiw-grid" v-if="channel.length>0">
          <div class="aig-title">
            <div class="tit">预约渠道</div>
          </div>
          <div class="aiw-main">
            <div class="channel">
              <div class="channel-item" v-for="(item,index) in channel" :key="index">{{item}}</div>
            </div>
          </div>
        </div>
        <div class="aiw-grid">
          <el-row :gutter="10">
            <el-col :span="parametersTypeByPart === $store.state.user.parametersTypeByPartKey1?10:24">
              <div class="aig-title">
                <div class="tit">检查部位<span v-if="bigpartChecked.length" class="tit_tips">（{{bigpartChecked.length}}）</span></div>
              </div>
              <div class="aiw-main checkbox-main">
                <div class="checkbox_box">
                  <div v-show="bigpartData.length>0">
                    <el-checkbox-group v-model="bigpartChecked" @change="handleCheckChangeBigpart">
                      <el-checkbox :disabled="true" v-for="(item,index) in bigpartData" :label="item" :key="index" :title="item">{{item}}</el-checkbox>
                    </el-checkbox-group>
                  </div>
                  <div v-show="bigpartData.length===0" class="ky-listnone">暂无数据！</div>
                </div>
              </div>
            </el-col>
            <el-col :span="14" v-if="parametersTypeByPart === $store.state.user.parametersTypeByPartKey1">
              <div class="aig-title">
                <div class="tit">检查项目<span v-if="smallpartChecked.length" class="tit_tips">（{{smallpartChecked.length}}）</span></div>
              </div>
              <div class="aiw-main checkbox-main">
                <div class="checkbox_box">
                  <div v-show="smallpartData.length>0">
                    <el-checkbox-group v-model="smallpartChecked" @change="handleCheckChangeSmallpart">
                      <el-checkbox :disabled="true" v-for="(item,index) in smallpartData" :label="item" :key="index" :title="item">{{item}}</el-checkbox>
                    </el-checkbox-group>
                  </div>
                  <div v-show="smallpartData.length===0" class="ky-listnone">暂无数据！</div>
                </div>
              </div>
            </el-col>
          </el-row>
        </div>

        <div class="aiw-footer">
          <el-button size="small" @click="close">返回</el-button>
          <el-button size="small" @click="sourceInfoOpen">锁定号源</el-button>
          <el-button size="small" type="warning" @click="handleLog" v-if="appoInfo.id">日志</el-button>
        </div>
      </div>
    </Dialogdrawerdefect>
    <appoInfoDetail ref="appoInfoDetail"></appoInfoDetail>
    <!-- 时段日志 -->
    <appoPeriodLog
      :hospital-code="hospitalCode"
      :appo-period-log-dlg.sync="appoPeriodLogDlg"
      :id="appoLogId"
      tabel-type="1"></appoPeriodLog>
  </div>
</template>

<script>
import { depSalt } from '@/api/room'
import appoInfoDetail from './appoInfoDetail'
import { dateFormatter } from '@/utils/validate'
import Dialogdrawerdefect from '@/components/dialogbox/dialogDrawerDefect'
import appoPeriodLog from '@/components/logDialog/appoPeriodLog'
// const channelSplitKey = '、'
let parametersTypeByPart1 = 'bigpart'
let parametersTypeByPart2 = 'dengjipart'
export default {
  props: {
    hospitalCode: {
      type: String,
      default: ''
    },
    dep: {
      type: String,
      default: ''
    }
  },
  components: {
    Dialogdrawerdefect,
    appoInfoDetail,
    appoPeriodLog
  },
  data() {
    return {
      parametersValuesSplit: this.$store.state.user.parametersValuesSplit,
      parametersTypeByPart: parametersTypeByPart1, // 'dengjipart'
      treeloading: false,
      appoInfoVisible: false,
      appoInfo: {

      },
      tableDataTime: [],
      tableDataInfo: [],
      tableDataFilter: [],
      channel: [],

      checkTypeData: [],
      checkedPartNodes: [],
      defaultProps: {
        children: 'childrens',
        label: 'text'
      },

      bigpartChecked: [],
      bigpartData: [],
      smallpartChecked: [],
      smallpartData: [],
      // 操作日志
      appoPeriodLogDlg: false,
      appoLogId: null

    }
  },
  watch: {
    hospitalCode(val) {
      if (this.dep && val && this.appoInfoVisible) {
        // this.checkTypeData = []
        // this.getBigPartGettreeList()
      }
    },
    dep(val) {
      this.getParameterDep()
      if (this.hospitalCode && val && this.appoInfoVisible) {
        // this.checkTypeData = []
        // this.getBigPartGettreeList()
      }
    }
  },
  created() {
    parametersTypeByPart1 = this.$store.state.user.parametersTypeByPartKey1
    parametersTypeByPart2 = this.$store.state.user.parametersTypeByPartKey2
    this.parametersTypeByPart = parametersTypeByPart1
    this.getParameterDep()
  },
  methods: {
    getParameterDep() {
      let _dep = ''
      if (this.dep) {
        _dep = this.dep.replace(depSalt, '')
      }
      this.parametersTypeByPart = parametersTypeByPart1
      const _deps = this.$store.state.user.depSettings
      if (_dep && _deps && _deps.length > 0) {
        _deps.forEach(item => {
          if (item.parametersTypeByPart === parametersTypeByPart2 && item.dep === _dep) {
            this.parametersTypeByPart = parametersTypeByPart2
          }
        })
      }
      // console.log('_dep_dep_dep_dep', _dep)
      // console.log('parametersTypeByPart', this.parametersTypeByPart)
    },
    sourceInfoOpen() {
      this.$emit('openSourceInfoDialog', this.appoInfo)
    },
    init(appoInfo) {
      this.appoInfo = JSON.parse(JSON.stringify(appoInfo))
      this.reset()
      this.appoInfoVisible = true
      this.$nextTick(async () => {
        this.setInfo()
      })
    },
    reset() {
      this.tableDataTime = []
      this.tableDataInfo = []
      this.tableDataFilter = []
      this.channel = []
      this.bigpartChecked = []
      this.bigpartData = []
      this.smallpartChecked = []
      this.smallpartData = []
    },
    setInfo() {
      console.log('++++++++++++++++setInfo+++++++++++++++++设置checkClass')
      this.tableDataTime = [
        {
          appointmentDate: dateFormatter(this.appoInfo.appointmentDate, false),
          checkClass: this.appoInfo.checkClass,
          beginTime: this.appoInfo.beginTime,
          endTime: this.appoInfo.endTime,
          color: this.appoInfo.color
        }
      ]
      this.tableDataInfo = [
        {
          initialNum: this.appoInfo.initialNum,
          checkNum: this.appoInfo.checkNum,
          addNum: this.appoInfo.addNum,
          reserveNum: this.appoInfo.reserveNum,
          callNum: this.appoInfo.callNum,
          appointmentStatus: this.appoInfo.appointmentStatus
        }
      ]
      this.calSetRule()
    },
    calSetRule() {
      const appoFlr = JSON.parse(JSON.stringify(this.appoInfo.appointmentFilters))
      for (let index = 0; index < appoFlr.length; index++) {
        let flrObj = appoFlr[index]
        if (flrObj.parametersType === this.parametersTypeByPart) {
          // 检查部位
          this.bigpartChecked = flrObj.parametersValues.split(this.parametersValuesSplit)
          this.bigpartData = [...this.bigpartChecked]
          continue
        }
        if (flrObj.parametersType === parametersTypeByPart2 && this.parametersTypeByPart !== parametersTypeByPart2) {
          // 检查项目
          this.smallpartChecked = flrObj.parametersValues.split(this.parametersValuesSplit)
          this.smallpartData = [...this.smallpartChecked]
          continue
        }
        if (flrObj.parametersType === 'WYYY' || flrObj.parametersType === 'LCYY' || flrObj.parametersType === 'VIP') {
          // 外院预约、临床预约、转诊预约
          this.channel.push(flrObj.parametersValues)
          continue
        }
        this.tableDataFilter.push(flrObj)
      }
    },
    handleCheckChangeBigpart(data) {
      console.log(data)
    },
    handleCheckChangeSmallpart(data) {
      console.log(data)
    },

    // 关闭弹框
    close() {
      this.appoInfoVisible = false
    },
    // 预约详情
    appoDetail() {
      const params = {
        HospitalCode: this.appoInfo.hospitalCode,
        AppointmentListDmbId: this.appoInfo.id
      }
      this.$refs.appoInfoDetail.init(params)
    },
    // 时段日志
    handleLog() {
      this.appoLogId = this.appoInfo.id + ''
      this.appoPeriodLogDlg = true
    },

    // 预约状态，样式class判断
    appoStatusClassFlr(val) {
      switch (val) {
        case '':
          return 'appo-grey'
        case '节假日':
          return 'appo-danger'
        case '暂停预约':
        case '设备故障':
          return 'appo-warn'
        case '正常预约':
          return 'appo-success'
        default:
          return 'appo-default'
      }
    }
  }
}
</script>

<style lang="scss" scoped>
$color-primary:#00C0EF;
$appoSuccessColor: #0bd677;
$appoDefaultColor: #1890FF;
$appoDangerColor: #E37470;
$appoWarnColor: #FF8618;
$appoGreyColor: #919398;
.appoInfo-wrap{
  display: flex;
  flex-direction: column;
  padding-bottom: 54px;
  .aiw-grid{
    flex:1;
    padding: 10px 15px 0;
  }
  .aiw-footer{
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    text-align: right;
    padding: 10px 20px;
    border-top: solid 1px #DCDFE6;
    background-color: #fff;
  }
}
.checkbox-main{
  padding: 10px;
  background-color: #F3F6FB;
  .checkbox_box{
    background-color: #fff;
    max-height: 330px;
    width: 100%;
    overflow: hidden;
    overflow-y: auto;
    /deep/ .el-checkbox{
      width: 100%;
      padding: 2px 4px;
    }
    /deep/ .el-checkbox__input.is-disabled+span.el-checkbox__label{
      color: #333;
    }
  }
}
.aig-title{
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 0;
  .tit{
    font-size: 14px;
    font-weight: bold;
    color: #333;
  }
  .navs{
    display: flex;
    align-items: center;
    color: $color-primary;
    cursor: pointer;
    user-select: none;
    // .btn{
    //   padding-right: 10px;
    //   margin-right: 10px;
    // }
  }
}
.channel{
  display: flex;
  flex-wrap: nowrap;
  // border: solid 1px #e5e5e5;
  .channel-item{
    max-width: 200px;
    flex-grow: 1;
    text-align: center;
    line-height: 32px;
    border: solid 1px #e5e5e5;
    font-size: 14px;
    color: #666;
    // &:last-child{
    //   border-right: none;
    // }
  }
}
.appo-grey{
  color: $appoGreyColor;
}
.appo-danger{
  color: $appoDangerColor;
}
.appo-warn{
  color: $appoWarnColor;
}
.appo-success{
  color: $appoSuccessColor;
}
.appo-default{
  color: $appoDefaultColor;
}
.color_block{
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 4px;
  vertical-align: -2px;
}
</style>
